<template>
    <div class='orderlist-container'>
        <el-tabs v-model="orderVo.status" @tab-click="handleClick">
            <el-tab-pane label="所有订单" name="99">
                <div class="main-container">
                    <!-- 搜索框 -->
                    <div class="search">
                        <el-input placeholder="输入订单标题或订单号进行搜索" v-model="searchInfo" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search">订单搜索</el-button>
                        </el-input>
                    </div>
                    <!-- 订单提示标头 -->
                    <div class="tip-head" id="tip-head">
                        <ul>
                            <li class="baby-title">
                                <span>宝贝</span>
                            </li>
                            <li class="price-tip">
                                <span>单价</span>
                            </li>
                            <li class="number-tip">
                                <span>数量</span>
                            </li>
                            <li class="option-tip">
                                <span>商品操作</span>
                            </li>
                            <li class="true-price-tip">
                                <span>实付款</span>
                            </li>
                            <li class="order-status-tip">
                                <span>交易状态</span>
                            </li>
                            <li class="order-option-tip">
                                <span>交易操作</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 切换页数 -->
                    <div class="swap-page">
                        <div>
                            <el-button size="mini" round>上一页</el-button>
                            <el-button size="mini" round>下一页</el-button>
                        </div>
                    </div>
                    <!-- 订单详细 -->
                    <div v-for="order in orderList" :key="order.orderSn" v-if="orderList.length > 0">
                        <div class="ordet-item" v-for="product, index in order.products"
                            style="border-top: 2px solid #ff4401; margin-bottom: 20px; border: 1px solid #ececec;">

                            <ul class="order-item-head">
                                <li class="order-ordersn">
                                    <span>{{ getTime(order.order.createTime) }}</span>
                                    <span>订单号：{{ order.order.orderSn }}</span>
                                </li>
                                <li class="settle-auther">
                                    <!-- 前往用户主页 -->
                                    <span @click="goMemberIndex(order.memberSpuVos[index].memberId)">{{
                                        order.memberSpuVos[index].username }}</span>
                                </li>
                                <li class="customer-service">
                                    <span
                                        @click="contact(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">联系客服</span>
                                </li>
                                <li class="delete-order">
                                    <span @click="deleteOrder(order.order.orderSn, product.id)"><i
                                            class="el-icon-delete"></i></span>
                                </li>
                            </ul>
                            <ul class="product-item">
                                <li class="baby-title baby">
                                    <div class="product-img">
                                        <img :src="product.spuPic" alt="">
                                    </div>
                                    <div class="product-info">
                                        <div :title="product.spuDetail.replaceAll('<br>', '\n')" v-html="product.spuDetail">
                                        </div>
                                        <div>
                                            <ul class="all-attr">
                                                <li v-for="attr in product.attrs">
                                                    <!-- <span class="attr-name">
                                                            颜色：
                                                        </span> -->
                                                    <span class="attr-value">
                                                        {{ attr }} &nbsp;
                                                    </span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="price-tip price">
                                    <span>￥{{ product.skuPrice }}</span>
                                </li>
                                <li class="number-tip number">
                                    <span>{{ product.skuQuantity }}</span>
                                </li>
                                <li class="option-tip option">
                                    <span
                                        @click="complaint(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">投诉商家</span>
                                </li>
                                <li class="true-price-tip price">
                                    <span>￥{{ product.skuPrice }}</span>
                                </li>
                                <li class="order-status-tip order-status">
                                    <span>{{ orderStatus(order.order.status) }}</span>
                                    <span @click="orderDetail(order.order.orderSn, product.spuId)">订单详情</span>
                                </li>
                                <li class="order-option-tip order-status">
                                    <span title="支付的是该订单下的所有商品" @click="checkMethod(order.order.orderSn, order.order.totalAmount,
                                        '您购买了: ' + order.products.length + ' 件商品', order.order.status)">
                                        {{ checkTip(order.order.status) }}
                                    </span>
                                    <span @click="comment(order.order.orderSn)"
                                        v-if="(order.order.status == 4)">追加评论</span>
                                    <span @click="refund(order.order.orderSn, product.id)"
                                        v-if="(order.order.status > 0 && order.order.status < 4)">申请退款</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div v-if="orderList.length == 0">
                        <el-empty :image-size="400"></el-empty>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="待付款" name="0">
                <!-- 订单提示标头 -->
                <div class="tip-head" id="tip-head">
                    <ul>
                        <li class="baby-title">
                            <span>宝贝</span>
                        </li>
                        <li class="price-tip">
                            <span>单价</span>
                        </li>
                        <li class="number-tip">
                            <span>数量</span>
                        </li>
                        <li class="option-tip">
                            <span>商品操作</span>
                        </li>
                        <li class="true-price-tip">
                            <span>实付款</span>
                        </li>
                        <li class="order-status-tip">
                            <span>交易状态</span>
                        </li>
                        <li class="order-option-tip">
                            <span>交易操作</span>
                        </li>
                    </ul>
                </div>
                <!-- 切换页数 -->
                <div class="swap-page">
                    <div>
                        <el-button size="mini" round>上一页</el-button>
                        <el-button size="mini" round>下一页</el-button>
                    </div>
                </div>
                <!-- 订单详细 -->
                <div v-for="order in orderList" :key="order.orderSn" v-if="orderList.length > 0">
                    <div class="ordet-item" v-for="product, index in order.products"
                        style="border-top: 2px solid #ff4401; margin-bottom: 20px; border: 1px solid #ececec;">

                        <ul class="order-item-head">
                            <li class="order-ordersn">
                                <span>{{ getTime(order.order.createTime) }}</span>
                                <span>订单号：{{ order.order.orderSn }}</span>
                            </li>
                            <li class="settle-auther">
                                <!-- 前往用户主页 -->
                                <span>{{ order.memberSpuVos[index].username }}</span>
                            </li>
                            <li class="customer-service">
                                <span
                                    @click="contact(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">联系客服</span>
                            </li>
                            <li class="delete-order">
                                <span @click="deleteOrder(order.order.orderSn, product.id)"><i
                                        class="el-icon-delete"></i></span>
                            </li>
                        </ul>
                        <ul class="product-item">
                            <li class="baby-title baby">
                                <div class="product-img">
                                    <img :src="product.spuPic" alt="">
                                </div>
                                <div class="product-info">
                                    <div :title="product.spuDetail.replaceAll('<br>', '\n')" v-html="product.spuDetail">
                                    </div>
                                    <div>
                                        <ul class="all-attr">
                                            <li v-for="attr in product.attrs">
                                                <!-- <span class="attr-name">
                                                            颜色：
                                                        </span> -->
                                                <span class="attr-value">
                                                    {{ attr }} &nbsp;
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="number-tip number">
                                <span>{{ product.skuQuantity }}</span>
                            </li>
                            <li class="option-tip option">
                                <span
                                    @click="complaint(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">投诉商家</span>
                            </li>
                            <li class="true-price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="order-status-tip order-status">
                                <span>{{ orderStatus(order.order.status) }}</span>
                                <span @click="orderDetail(order.order.orderSn, product.spuId)">订单详情</span>
                            </li>
                            <li class="order-option-tip order-status">
                                <span title="支付的是该订单下的所有商品" @click="checkMethod(order.order.orderSn, order.order.totalAmount,
                                    '您购买了: ' + order.products.length + ' 件商品', order.order.status)">
                                    {{ checkTip(order.order.status) }}
                                </span>
                                <span @click="comment(order.order.orderSn)" v-if="(order.order.status == 4)">追加评论</span>
                                <span @click="refund(order.order.orderSn, product.id)"
                                    v-if="(order.order.status > 0 && order.order.status < 4)">申请退款</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-if="orderList.length == 0">
                    <el-empty :image-size="400"></el-empty>
                </div>

            </el-tab-pane>
            <el-tab-pane label="待发货" name="1">
                <!-- 订单提示标头 -->
                <div class="tip-head" id="tip-head">
                    <ul>
                        <li class="baby-title">
                            <span>宝贝</span>
                        </li>
                        <li class="price-tip">
                            <span>单价</span>
                        </li>
                        <li class="number-tip">
                            <span>数量</span>
                        </li>
                        <li class="option-tip">
                            <span>商品操作</span>
                        </li>
                        <li class="true-price-tip">
                            <span>实付款</span>
                        </li>
                        <li class="order-status-tip">
                            <span>交易状态</span>
                        </li>
                        <li class="order-option-tip">
                            <span>交易操作</span>
                        </li>
                    </ul>
                </div>
                <!-- 切换页数 -->
                <div class="swap-page">
                    <div>
                        <el-button size="mini" round>上一页</el-button>
                        <el-button size="mini" round>下一页</el-button>
                    </div>
                </div>
                <!-- 订单详细 -->
                <div v-for="order in orderList" :key="order.orderSn" v-if="orderList.length > 0">
                    <div class="ordet-item" v-for="product, index in order.products"
                        style="border-top: 2px solid #ff4401; margin-bottom: 20px; border: 1px solid #ececec;">

                        <ul class="order-item-head">
                            <li class="order-ordersn">
                                <span>{{ getTime(order.order.createTime) }}</span>
                                <span>订单号：{{ order.order.orderSn }}</span>
                            </li>
                            <li class="settle-auther">
                                <!-- 前往用户主页 -->
                                <span>{{ order.memberSpuVos[index].username }}</span>
                            </li>
                            <li class="customer-service">
                                <span
                                    @click="contact(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">联系客服</span>
                            </li>
                            <li class="delete-order">
                                <span @click="deleteOrder(order.order.orderSn, product.id)"><i
                                        class="el-icon-delete"></i></span>
                            </li>
                        </ul>
                        <ul class="product-item">
                            <li class="baby-title baby">
                                <div class="product-img">
                                    <img :src="product.spuPic" alt="">
                                </div>
                                <div class="product-info">
                                    <div :title="product.spuDetail.replaceAll('<br>', '\n')" v-html="product.spuDetail">
                                    </div>
                                    <div>
                                        <ul class="all-attr">
                                            <li v-for="attr in product.attrs">
                                                <!-- <span class="attr-name">
                                                            颜色：
                                                        </span> -->
                                                <span class="attr-value">
                                                    {{ attr }} &nbsp;
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="number-tip number">
                                <span>{{ product.skuQuantity }}</span>
                            </li>
                            <li class="option-tip option">
                                <span
                                    @click="complaint(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">投诉商家</span>
                            </li>
                            <li class="true-price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="order-status-tip order-status">
                                <span>{{ orderStatus(order.order.status) }}</span>
                                <span @click="orderDetail(order.order.orderSn, product.spuId)">订单详情</span>
                            </li>
                            <li class="order-option-tip order-status">
                                <span title="支付的是该订单下的所有商品" @click="checkMethod(order.order.orderSn, order.order.totalAmount,
                                    '您购买了: ' + order.products.length + ' 件商品', order.order.status)">
                                    {{ checkTip(order.order.status) }}
                                </span>
                                <span @click="comment(order.order.orderSn)" v-if="(order.order.status == 4)">追加评论</span>
                                <span @click="refund(order.order.orderSn, product.id)"
                                    v-if="(order.order.status > 0 && order.order.status < 4)">申请退款</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-if="orderList.length == 0">
                    <el-empty :image-size="400"></el-empty>
                </div>
            </el-tab-pane>
            <el-tab-pane label="待收货" name="2">
                <!-- 订单提示标头 -->
                <div class="tip-head" id="tip-head">
                    <ul>
                        <li class="baby-title">
                            <span>宝贝</span>
                        </li>
                        <li class="price-tip">
                            <span>单价</span>
                        </li>
                        <li class="number-tip">
                            <span>数量</span>
                        </li>
                        <li class="option-tip">
                            <span>商品操作</span>
                        </li>
                        <li class="true-price-tip">
                            <span>实付款</span>
                        </li>
                        <li class="order-status-tip">
                            <span>交易状态</span>
                        </li>
                        <li class="order-option-tip">
                            <span>交易操作</span>
                        </li>
                    </ul>
                </div>
                <!-- 切换页数 -->
                <div class="swap-page">
                    <div>
                        <el-button size="mini" round>上一页</el-button>
                        <el-button size="mini" round>下一页</el-button>
                    </div>
                </div>
                <!-- 订单详细 -->
                <div v-for="order in orderList" :key="order.orderSn" v-if="orderList.length > 0">
                    <div class="ordet-item" v-for="product, index in order.products"
                        style="border-top: 2px solid #ff4401; margin-bottom: 20px; border: 1px solid #ececec;">

                        <ul class="order-item-head">
                            <li class="order-ordersn">
                                <span>{{ getTime(order.order.createTime) }}</span>
                                <span>订单号：{{ order.order.orderSn }}</span>
                            </li>
                            <li class="settle-auther">
                                <!-- 前往用户主页 -->
                                <span>{{ order.memberSpuVos[index].username }}</span>
                            </li>
                            <li class="customer-service">
                                <span
                                    @click="contact(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">联系客服</span>
                            </li>
                            <li class="delete-order">
                                <span @click="deleteOrder(order.order.orderSn, product.id)"><i
                                        class="el-icon-delete"></i></span>
                            </li>
                        </ul>
                        <ul class="product-item">
                            <li class="baby-title baby">
                                <div class="product-img">
                                    <img :src="product.spuPic" alt="">
                                </div>
                                <div class="product-info">
                                    <div :title="product.spuDetail.replaceAll('<br>', '\n')" v-html="product.spuDetail">
                                    </div>
                                    <div>
                                        <ul class="all-attr">
                                            <li v-for="attr in product.attrs">
                                                <!-- <span class="attr-name">
                                                            颜色：
                                                        </span> -->
                                                <span class="attr-value">
                                                    {{ attr }} &nbsp;
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="number-tip number">
                                <span>{{ product.skuQuantity }}</span>
                            </li>
                            <li class="option-tip option">
                                <span
                                    @click="complaint(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">投诉商家</span>
                            </li>
                            <li class="true-price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="order-status-tip order-status">
                                <span>{{ orderStatus(order.order.status) }}</span>
                                <span @click="orderDetail(order.order.orderSn, product.spuId)">订单详情</span>
                            </li>
                            <li class="order-option-tip order-status">
                                <span title="支付的是该订单下的所有商品" @click="checkMethod(order.order.orderSn, order.order.totalAmount,
                                    '您购买了: ' + order.products.length + ' 件商品', order.order.status)">
                                    {{ checkTip(order.order.status) }}
                                </span>
                                <span @click="comment(order.order.orderSn)" v-if="(order.order.status == 4)">追加评论</span>
                                <span @click="refund(order.order.orderSn, product.id)"
                                    v-if="(order.order.status > 0 && order.order.status < 4)">申请退款</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-if="orderList.length == 0">
                    <el-empty :image-size="400"></el-empty>
                </div>
            </el-tab-pane>
            <el-tab-pane label="已收货" name="3">
                <!-- 订单提示标头 -->
                <div class="tip-head" id="tip-head">
                    <ul>
                        <li class="baby-title">
                            <span>宝贝</span>
                        </li>
                        <li class="price-tip">
                            <span>单价</span>
                        </li>
                        <li class="number-tip">
                            <span>数量</span>
                        </li>
                        <li class="option-tip">
                            <span>商品操作</span>
                        </li>
                        <li class="true-price-tip">
                            <span>实付款</span>
                        </li>
                        <li class="order-status-tip">
                            <span>交易状态</span>
                        </li>
                        <li class="order-option-tip">
                            <span>交易操作</span>
                        </li>
                    </ul>
                </div>
                <!-- 切换页数 -->
                <div class="swap-page">
                    <div>
                        <el-button size="mini" round>上一页</el-button>
                        <el-button size="mini" round>下一页</el-button>
                    </div>
                </div>
                <!-- 订单详细 -->
                <div v-for="order in orderList" :key="order.orderSn" v-if="orderList.length > 0">
                    <div class="ordet-item" v-for="product, index in order.products"
                        style="border-top: 2px solid #ff4401; margin-bottom: 20px; border: 1px solid #ececec;">

                        <ul class="order-item-head">
                            <li class="order-ordersn">
                                <span>{{ getTime(order.order.createTime) }}</span>
                                <span>订单号：{{ order.order.orderSn }}</span>
                            </li>
                            <li class="settle-auther">
                                <!-- 前往用户主页 -->
                                <span>{{ order.memberSpuVos[index].username }}</span>
                            </li>
                            <li class="customer-service">
                                <span
                                    @click="contact(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">联系客服</span>
                            </li>
                            <li class="delete-order">
                                <span @click="deleteOrder(order.order.orderSn, product.id)"><i
                                        class="el-icon-delete"></i></span>
                            </li>
                        </ul>
                        <ul class="product-item">
                            <li class="baby-title baby">
                                <div class="product-img">
                                    <img :src="product.spuPic" alt="">
                                </div>
                                <div class="product-info">
                                    <div :title="product.spuDetail.replaceAll('<br>', '\n')" v-html="product.spuDetail">
                                    </div>
                                    <div>
                                        <ul class="all-attr">
                                            <li v-for="attr in product.attrs">
                                                <!-- <span class="attr-name">
                                                            颜色：
                                                        </span> -->
                                                <span class="attr-value">
                                                    {{ attr }} &nbsp;
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="number-tip number">
                                <span>{{ product.skuQuantity }}</span>
                            </li>
                            <li class="option-tip option">
                                <span
                                    @click="complaint(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">投诉商家</span>
                            </li>
                            <li class="true-price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="order-status-tip order-status">
                                <span>{{ orderStatus(order.order.status) }}</span>
                                <span @click="orderDetail(order.order.orderSn, product.spuId)">订单详情</span>
                            </li>
                            <li class="order-option-tip order-status">
                                <span title="支付的是该订单下的所有商品" @click="checkMethod(order.order.orderSn, order.order.totalAmount,
                                    '您购买了: ' + order.products.length + ' 件商品', order.order.status)">
                                    {{ checkTip(order.order.status) }}
                                </span>
                                <span @click="comment(order.order.orderSn)" v-if="(order.order.status == 4)">追加评论</span>
                                <span @click="refund(order.order.orderSn, product.id)"
                                    v-if="(order.order.status > 0 && order.order.status < 4)">申请退款</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-if="orderList.length == 0">
                    <el-empty :image-size="400"></el-empty>
                </div>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="4">
                <!-- 订单提示标头 -->
                <div class="tip-head" id="tip-head">
                    <ul>
                        <li class="baby-title">
                            <span>宝贝</span>
                        </li>
                        <li class="price-tip">
                            <span>单价</span>
                        </li>
                        <li class="number-tip">
                            <span>数量</span>
                        </li>
                        <li class="option-tip">
                            <span>商品操作</span>
                        </li>
                        <li class="true-price-tip">
                            <span>实付款</span>
                        </li>
                        <li class="order-status-tip">
                            <span>交易状态</span>
                        </li>
                        <li class="order-option-tip">
                            <span>交易操作</span>
                        </li>
                    </ul>
                </div>
                <!-- 切换页数 -->
                <div class="swap-page">
                    <div>
                        <el-button size="mini" round>上一页</el-button>
                        <el-button size="mini" round>下一页</el-button>
                    </div>
                </div>
                <!-- 订单详细 -->
                <div v-for="order in orderList" :key="order.orderSn" v-if="orderList.length > 0">
                    <div class="ordet-item" v-for="product, index in order.products"
                        style="border-top: 2px solid #ff4401; margin-bottom: 20px; border: 1px solid #ececec;">

                        <ul class="order-item-head">
                            <li class="order-ordersn">
                                <span>{{ getTime(order.order.createTime) }}</span>
                                <span>订单号：{{ order.order.orderSn }}</span>
                            </li>
                            <li class="settle-auther">
                                <!-- 前往用户主页 -->
                                <span>{{ order.memberSpuVos[index].username }}</span>
                            </li>
                            <li class="customer-service">
                                <span
                                    @click="contact(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">联系客服</span>
                            </li>
                            <li class="delete-order">
                                <span @click="deleteOrder(order.order.orderSn, product.id)"><i
                                        class="el-icon-delete"></i></span>
                            </li>
                        </ul>
                        <ul class="product-item">
                            <li class="baby-title baby">
                                <div class="product-img">
                                    <img :src="product.spuPic" alt="">
                                </div>
                                <div class="product-info">
                                    <div :title="product.spuDetail.replaceAll('<br>', '\n')" v-html="product.spuDetail">
                                    </div>
                                    <div>
                                        <ul class="all-attr">
                                            <li v-for="attr in product.attrs">
                                                <!-- <span class="attr-name">
                                                            颜色：
                                                        </span> -->
                                                <span class="attr-value">
                                                    {{ attr }} &nbsp;
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="number-tip number">
                                <span>{{ product.skuQuantity }}</span>
                            </li>
                            <li class="option-tip option">
                                <span @click="complaint(order.memberSpuVos[index].memberId)">投诉商家</span>
                            </li>
                            <li class="true-price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="order-status-tip order-status">
                                <span>{{ orderStatus(order.order.status) }}</span>
                                <span @click="orderDetail(order.order.orderSn, product.spuId)">订单详情</span>
                            </li>
                            <li class="order-option-tip order-status">
                                <span title="支付的是该订单下的所有商品" @click="checkMethod(order.order.orderSn, order.order.totalAmount,
                                    '您购买了: ' + order.products.length + ' 件商品', order.order.status)">
                                    {{ checkTip(order.order.status) }}
                                </span>
                                <span @click="comment(order.order.orderSn)" v-if="(order.order.status == 4)">追加评论</span>
                                <span @click="refund(order.order.orderSn, product.id)"
                                    v-if="(order.order.status > 0 && order.order.status < 4)">申请退款</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-if="orderList.length == 0">
                    <el-empty :image-size="400"></el-empty>
                </div>
            </el-tab-pane>
            <el-tab-pane label="待评价" name="5">
                <!-- 订单提示标头 -->
                <div class="tip-head" id="tip-head">
                    <ul>
                        <li class="baby-title">
                            <span>宝贝</span>
                        </li>
                        <li class="price-tip">
                            <span>单价</span>
                        </li>
                        <li class="number-tip">
                            <span>数量</span>
                        </li>
                        <li class="option-tip">
                            <span>商品操作</span>
                        </li>
                        <li class="true-price-tip">
                            <span>实付款</span>
                        </li>
                        <li class="order-status-tip">
                            <span>交易状态</span>
                        </li>
                        <li class="order-option-tip">
                            <span>交易操作</span>
                        </li>
                    </ul>
                </div>
                <!-- 切换页数 -->
                <div class="swap-page">
                    <div>
                        <el-button size="mini" round>上一页</el-button>
                        <el-button size="mini" round>下一页</el-button>
                    </div>
                </div>
                <!-- 订单详细 -->
                <div v-for="order in orderList" :key="order.orderSn" v-if="orderList.length > 0">
                    <div class="ordet-item" v-for="product, index in order.products"
                        style="border-top: 2px solid #ff4401; margin-bottom: 20px; border: 1px solid #ececec;">

                        <ul class="order-item-head">
                            <li class="order-ordersn">
                                <span>{{ getTime(order.order.createTime) }}</span>
                                <span>订单号：{{ order.order.orderSn }}</span>
                            </li>
                            <li class="settle-auther">
                                <!-- 前往用户主页 -->
                                <span>{{ order.memberSpuVos[index].username }}</span>
                            </li>
                            <li class="customer-service">
                                <span
                                    @click="contact(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">联系客服</span>
                            </li>
                            <li class="delete-order">
                                <span @click="deleteOrder(order.order.orderSn, product.id)"><i
                                        class="el-icon-delete"></i></span>
                            </li>
                        </ul>
                        <ul class="product-item">
                            <li class="baby-title baby">
                                <div class="product-img">
                                    <img :src="product.spuPic" alt="">
                                </div>
                                <div class="product-info">
                                    <div :title="product.spuDetail.replaceAll('<br>', '\n')" v-html="product.spuDetail">
                                    </div>
                                    <div>
                                        <ul class="all-attr">
                                            <li v-for="attr in product.attrs">
                                                <!-- <span class="attr-name">
                                                            颜色：
                                                        </span> -->
                                                <span class="attr-value">
                                                    {{ attr }} &nbsp;
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="number-tip number">
                                <span>{{ product.skuQuantity }}</span>
                            </li>
                            <li class="option-tip option">
                                <span
                                    @click="complaint(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">投诉商家</span>
                            </li>
                            <li class="true-price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="order-status-tip order-status">
                                <span>{{ orderStatus(order.order.status) }}</span>
                                <span @click="orderDetail(order.order.orderSn, product.spuId)">订单详情</span>
                            </li>
                            <li class="order-option-tip order-status">
                                <span title="支付的是该订单下的所有商品" @click="checkMethod(order.order.orderSn, order.order.totalAmount,
                                    '您购买了: ' + order.products.length + ' 件商品', order.order.status)">
                                    {{ checkTip(order.order.status) }}
                                </span>
                                <span @click="comment(order.order.orderSn)" v-if="(order.order.status == 4)">追加评论</span>
                                <span @click="refund(order.order.orderSn, product.id)"
                                    v-if="(order.order.status > 0 && order.order.status < 4)">申请退款</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-if="orderList.length == 0">
                    <el-empty :image-size="400"></el-empty>
                </div>
            </el-tab-pane>
            <el-tab-pane label="无效订单" name="6">
                <!-- 订单提示标头 -->
                <div class="tip-head" id="tip-head">
                    <ul>
                        <li class="baby-title">
                            <span>宝贝</span>
                        </li>
                        <li class="price-tip">
                            <span>单价</span>
                        </li>
                        <li class="number-tip">
                            <span>数量</span>
                        </li>
                        <li class="option-tip">
                            <span>商品操作</span>
                        </li>
                        <li class="true-price-tip">
                            <span>实付款</span>
                        </li>
                        <li class="order-status-tip">
                            <span>交易状态</span>
                        </li>
                        <li class="order-option-tip">
                            <span>交易操作</span>
                        </li>
                    </ul>
                </div>
                <!-- 切换页数 -->
                <div class="swap-page">
                    <div>
                        <el-button size="mini" round>上一页</el-button>
                        <el-button size="mini" round>下一页</el-button>
                    </div>
                </div>
                <!-- 订单详细 -->
                <div v-for="order in orderList" :key="order.orderSn" v-if="orderList.length > 0">
                    <div class="ordet-item" v-for="product, index in order.products"
                        style="border-top: 2px solid #ff4401; margin-bottom: 20px; border: 1px solid #ececec;">

                        <ul class="order-item-head">
                            <li class="order-ordersn">
                                <span>{{ getTime(order.order.createTime) }}</span>
                                <span>订单号：{{ order.order.orderSn }}</span>
                            </li>
                            <li class="settle-auther">
                                <!-- 前往用户主页 -->
                                <span>{{ order.memberSpuVos[index].username }}</span>
                            </li>
                            <li class="customer-service">
                                <span
                                    @click="contact(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">联系客服</span>
                            </li>
                            <li class="delete-order">
                                <span @click="deleteOrder(order.order.orderSn, product.id)"><i
                                        class="el-icon-delete"></i></span>
                            </li>
                        </ul>
                        <ul class="product-item">
                            <li class="baby-title baby">
                                <div class="product-img">
                                    <img :src="product.spuPic" alt="">
                                </div>
                                <div class="product-info">
                                    <div :title="product.spuDetail.replaceAll('<br>', '\n')" v-html="product.spuDetail">
                                    </div>
                                    <div>
                                        <ul class="all-attr">
                                            <li v-for="attr in product.attrs">
                                                <!-- <span class="attr-name">
                                                            颜色：
                                                        </span> -->
                                                <span class="attr-value">
                                                    {{ attr }} &nbsp;
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="number-tip number">
                                <span>{{ product.skuQuantity }}</span>
                            </li>
                            <li class="option-tip option">
                                <span
                                    @click="complaint(order.memberSpuVos[index].memberId, order.memberSpuVos[index].username)">投诉商家</span>
                            </li>
                            <li class="true-price-tip price">
                                <span>￥{{ product.skuPrice }}</span>
                            </li>
                            <li class="order-status-tip order-status">
                                <span>{{ orderStatus(order.order.status) }}</span>
                                <span @click="orderDetail(order.order.orderSn, product.spuId)">订单详情</span>
                            </li>
                            <li class="order-option-tip order-status">
                                <span title="支付的是该订单下的所有商品" @click="checkMethod(order.order.orderSn, order.order.totalAmount,
                                    '您购买了: ' + order.products.length + ' 件商品', order.order.status)">
                                    {{ checkTip(order.order.status) }}
                                </span>
                                <span @click="comment(order.order.orderSn)" v-if="(order.order.status == 4)">追加评论</span>
                                <span @click="refund(order.order.orderSn, product.id)"
                                    v-if="(order.order.status > 0 && order.order.status < 4)">申请退款</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-if="orderList.length == 0">
                    <el-empty :image-size="400"></el-empty>
                </div>
            </el-tab-pane>

        </el-tabs>

    </div>
</template>
<script>
import getUUID from '../../utils/uuid';
import { timestampToTime } from "../../utils/util"


export default {
    name: 'orderList',
    data() {
        return {
            orderList: [],
            searchInfo: '',
            memberVo: [],
            orderVo: {
                status: '99',
                memberId: '',
            },
            deleteOrderVo: {
                memberId: '',
                orderSn: '',
                orderItemId: ''
            },
            alipayUrl: '/shitou-third-party/alipay/pay',
            payVo: {
                traceNo: '',
                totalAmount: 0.00,
                subject: '',
                alipayTraceNo: '',
                returnUrl: "/member/accountsetting/orderlist"
            }
        };
    },
    components: {
    },
    methods: {


        /**
         * 投诉商家
         * @param {*} publisherId 
         * @param {*} publisherName 
         */
        complaint(publisherId, publisherName){
            this.$message({
                type: 'warning',
                message: "暂不支持投诉~"
            })
        },


        /**
         *  联系客服
         * @param {*} publisherId 
         * @param {*} publisherName 
         */
        contact(publisherId, publisherName) {
            this.$message({
                type: 'warning',
                message: "暂不提供客服服务~"
            })
        },


        // 前往用户首页
        goMemberIndex(memberId) {
            this.$router.push({
                path: '/member/othermember',
                query: {
                    memberId: memberId,
                    params: getUUID()
                }
            })
        },


        /**
         * 获取时间
         * @param {*} time 
         */
        getTime(time) {
            if (time == null || time == undefined) {
                return ""
            }
            return timestampToTime(time);
        },

        /**
         * 订单详情页
         * @param {*} orderSn 
         * @param {*} spuId
         */
        orderDetail(orderSn, spuId) {
            this.$router.push({
                path: '/order/orderDetail',
                query: {
                    orderSn: orderSn,
                    spuId: spuId
                }
            })
        },


        /**
         * 申请退款
         * @param {*} orderSn 
         */
        refund(orderSn, orderItemId) {
            this.$http({
                url: this.$http.adornUrl(`/shitou-order/shitouorder/order/refund?memberId=${this.memberVo.id}&orderSn=${orderSn}&orderItemId=${orderItemId}`),
                method: 'post',
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '申请退款成功，待卖家确认~'
                    })
                }
            })
        },


        /**
         * 评论
         * @param {*} orderSn 
         */
        comment(orderSn) {
            this.$message({
                type: 'warning',
                message: "暂不支持评论"
            })
        },


        /**
         * 选择执行的方法
         * @param {*} orderSn 
         * @param {*} totalAmount 
         * @param {*} subject 
         * @param {*} status 
         */
        checkMethod(orderSn, totalAmount, subject, status) {
            if (status < 1) {
                this.payAgain(orderSn, totalAmount, subject);
            } else if (status >= 1 && status < 3) {
                this.confirmReceipt(orderSn);
            } else {
                this.$message({
                    type: 'success',
                    message: '交易已完成'
                })
            }
        },


        /**
         * 选择提示的信息
         * @param {*} status 
         */
        checkTip(status) {
            if (status < 1) {
                return "继续支付"
            } else if (status >= 1 && status < 3) {
                return "确认收货"
            } else if (status >= 4) {
                return "已完成"
            }
        },


        /**
         * 确认收货
         */
        confirmReceipt(orderSn) {
            this.$http({
                url: this.$http.adornUrl(`/shitou-order/shitouorder/order/confirm?orderSn=${orderSn}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '收货成功'
                    })
                    this.getMemberOrder()
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },


        /**
         * 继续支付
         * @param {*} products 
         */
        payAgain(traceNo, totalAmount, subject) {
            this.$message({
                url: 'success',
                message: '支付的是该订单下的所有商品'
            })
            this.alipayUrl = window.SITE_CONFIG.baseUrl + this.alipayUrl;
            this.payVo.returnUrl = window.SITE_CONFIG.website + this.payVo.returnUrl
            this.alipayUrl = this.alipayUrl + `?traceNo=${traceNo}&totalAmount=${totalAmount}&subject=${subject}&returnUrl=${this.payVo.returnUrl}`
            window.location = this.alipayUrl
        },



        /**
         * 获得订单的状态显示
         * @param {*} status 
         */
        orderStatus(status) {
            if (status == 0) {
                return "待付款"
            } else if (status == 1) {
                return "待发货"
            } else if (status == 2) {
                return "待收货";
            } else if (status == 3) {
                return "已收货"
            } else if (status == 4) {
                return "已完成"
            } else if (status == 5) {
                return "待评论";
            } else if (status == 6) {
                return "无效订单"
            }
        },


        /**
         * 删除用户单个订单
         * @param {*} orderSn 
         * @param {*} orderItemId 
         */
        deleteOrder(orderSn, orderItemId) {
            this.deleteOrderVo.orderSn = orderSn
            this.deleteOrderVo.orderItemId = orderItemId;
            this.$http({
                url: this.$http.adornUrl("/shitou-order/shitouorder/order/deleteOrder"),
                method: 'post',
                data: this.$http.adornData(this.deleteOrderVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除订单成功'
                    })
                    this.getMemberOrder()
                } else {
                    this.$message({
                        type: 'success',
                        message: data.message
                    })
                }
            })
        },


        handleClick() {
            this.getMemberOrder()
        },

        // 通过 activeName 获取所有的订单数据
        getMemberOrder() {
            this.$http({
                url: this.$http.adornUrl("/shitou-order/shitouorder/order/getMemberOrder"),
                method: 'post',
                data: this.$http.adornData(this.orderVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.orderList = data.data == null ? [] : data.data
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        }
    },

    async created() {
        let member = await this.$memberInfo()
        if (member != null) {
            this.memberVo = member;
            this.orderVo.memberId = member.id
            this.deleteOrderVo.memberId = member.id
        }
        this.getMemberOrder()
    }
}
</script>
<style scoped>@import url("../../utils/css/orderlist.css");</style>